<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">酒店认证</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<form @submit="submitForm" class="submitForm">
				<view class="input_list" style="margin-top: 0px;">
					<view class="name">酒店全称</view>
					<input type="text" name="title" class="text_left" :value="title" @input="formTitle" placeholder-class="phcolor" bindinput='formTitle' placeholder="请输入酒店全称"/>
				</view>
				<view class="input_list">
					<view class="name">联系人</view>
					<input type="text" name="contacts" class="text_left" :value="contacts" @input="formContacts" placeholder-class="phcolor" bindinput='formIdcard' placeholder="请输入联系人姓名"/>
				</view>
				<view class="input_list">
					<view class="name">联系手机</view>
					<input type="number" name="phone01" class="text_left" :value="phone01" @input="formPhone01" placeholder-class="phcolor" placeholder="请输入联系手机号"/>
				</view>
				<view class="idcard_list">
					<view class="idcard_name">上传企业营业执照</view>
					<view class="idcard_box">
						<view class="up_box">
							<!-- input仅用于表单验证 -->
							<input name="yingye" hidden="true" :value="yingye"/>
							<view class='uploader_list' :style="yingye==''?'display:none;':'display:block;'">
								<image :src='yingyeZhanshi' class="idImg" mode="aspectFit" @tap='previewImg'/>
								<view class="delete"  @tap='deleteImg'>删除</view>
							</view>
							<view class="chooseImg"  @tap='chooseImg' :style="yingye==''?'display:block;':'display:none;'"><image :src="URL+'/JD_wx_img/add_pic.png'" mode="widthFix"></image>企业营业执照</view>
						</view>
					</view>
				</view>
				<view class="input_list">
					<view class="name">手机号码</view>
					<input type="number" name="phone02" class="text_left" :value="phone02" @input="formPhone02" placeholder-class="phcolor" placeholder="请输入手机号码"/>
				</view>
				<view class="input_list" style="margin-top: 0px;">
					<view class="name">验证码</view>
					<input type="number" name="code" class="text_left" :value="code" @input="formCode" placeholder-class="phcolor" placeholder="请填写验证码"/>
					<view class="codebox">
						<view class='getcode' @tap='getCode' :class="{'active':isGet==false}">获取验证码</view>
						<view class='getcode' :class="{'active':isGet==true}">{{sec}}秒</view>
					</view>
				</view>
				<view class="tips">
					<view>温馨提示：</view>
					<view>请确保信息真实准确；</view>
				</view>
				<button type="primary" form-type="submit" class="public_btn public_btn03">提交认证</button>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import WxValidate from '@/WxValidate.js';
	export default {
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				isGet: false,
				sec: 60,
				yingye: '',
				yingyeZhanshi: '',
				title: '',
				contacts: '',
				phone01: '',
				phone02: '',
				code: '',
			}
		},
		
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			//表单验证
			that.initValidate()
			
			//编辑过的认证信息
			uni.request({
				url: app.globalData.URL + '/api/v1/Hotel/real',
				method: "get",
				header:{
					token: uni.getStorageSync('token')
				},
				success: function (res){
					if(res.data.code==1){
						that.title = res.data.data.name//酒店名称
						that.contacts = res.data.data.contact//酒店联系人
						that.phone01 = res.data.data.phone//联系人电话
						that.yingye = res.data.data.license_image//酒店营业执照原始数据
						that.yingyeZhanshi = res.data.data.license_image_//展示身份证反面照
						that.phone02 = res.data.data.mobile//默认手机号
					}
				}
			})
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			initValidate() {
				var that = this;
				// 验证字段的规则
				const rules = {
					title:{
						required: true,
						minlength: 2
					},
					contacts:{
						required: true,
						minlength: 2
					},
					phone01:{
						required: true,
						tel: true,
					},
					yingye:{
						required: true,
					},
					phone02:{
						required: true,
						tel: true,
					},
					code:{
						required: true,
					},
					
				}
				// 验证字段的提示信息，若不传则调用默认的信息
				const messages = {
					title:{
						required: '请输入酒店全称',
						minlength: '酒店全称不少于两位'
					},
					contacts:{
						required: '请输入联系人姓名',
						minlength: '联系人姓名不少于两位',
					},
					phone01:{
						required: '请输入联系手机号',
						tel: '请填写正确的手机号',
					},
					yingye: {
						required: '请上传营业执照',
					},
					phone02:{
						required: '请填写手机号码',
						tel: '请填写正确的手机号',
					},
					code:{
						required: '请填写验证码',
					}
				}
				// 创建实例对象
				that.WxValidate = new WxValidate(rules, messages)
			},
			
			//表单验证
			showModal(error) {
				uni.showModal({
					content: error.msg,
					showCancel: false,
				})
			},
			
			//姓名实时监控
			formTitle:function(e){
				var that = this;
				that.title = e.detail.value;
			},
			//联系人实时监控
			formContacts:function(e){
				var that = this;
				that.contacts = e.detail.value;
			},
			//联系方式实时监控
			formPhone01:function(e){
				var that = this;
				that.phone01 = e.detail.value;
			},
			//手机号实时监控
			formPhone02:function(e){
				var that = this;
				that.phone02 = e.detail.value;
			},
			//验证码实时监控
			formCode:function(e){
				var that = this;
				that.code = e.detail.value;
			},

			//酒店认证表单提交
			submitForm(e) {
				var that = this;
				const params = e.detail.value;
				// 传入表单数据，调用验证方法
				if (!that.WxValidate.checkForm(params)){
					const error = that.WxValidate.errorList[0]
					that.showModal(error)
					return false
				}
				//酒店认证表单提交
				uni.request({
					url: app.globalData.URL + '/api/v1/Hotel/real',
					method: "post",
					header:{
						"Content-Type":"application/x-www-form-urlencoded",
						token: uni.getStorageSync('token')
					},
					data:{
						name: that.title,
						contact: that.contacts,
						phone: that.phone01,
						license_image: that.yingye,
						mobile: that.phone02,
						captcha: that.code
					},
					success: function (res) {
						if(res.data.code==0){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#93533E',
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '酒店认证成功',
								showCancel: false,
								confirmColor:'#93533E',
								success(res){
									uni.redirectTo({
									    url: '/pages/business_my_center/business_my_center',
									});
								}
							})
							uni.setStorageSync('hotel_real','1')
						}
						
					}
				})
			},
			
			// 获取验证码
			getCode(){
				var that= this
				//请求验证码接口
				uni.request({
					url: app.globalData.URL + '/api/v1/User/sendSms?mobile='+that.phone02,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						if(res.data.code==1){
							that.isGet = true
							var remain = 60;
							var time = setInterval(function () {
								if (remain == 1) {
									clearInterval(time)
									that.sec = 60
									that.isGet = false
									return false
								}
								remain--;
								that.sec = remain
							}, 1000)
						}else{
							wx.showModal({
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426'
							})
						}
					}
				})
			},
			
			//身份证反面上传效果
			//上传图片开始
			chooseImg: function(e){
			    var that = this;
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
					success: function (res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.URL + '/api/v1/File/upload', //仅为示例，非真实的接口地址
							header:{
								"Content-Type": "multipart/form-data",
								token: uni.getStorageSync('token')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							success (res){
								var list = JSON.parse(res.data)
								that.yingye = list.data.url
								that.yingyeZhanshi = tempFilePaths
							}
						})
					},
				});
			},

			// 删除图片
			deleteImg: function(e){
				var that = this;
				that.yingye = '';
				that.yingyeZhanshi = ''
			},
			// 预览图片
			previewImg: function(e){
				var that = this;
				var yingyeZhanshi = that.yingyeZhanshi;
				uni.previewImage({
					//所有图片
					urls: yingyeZhanshi
				})
			},//end
		}
	}
</script>

<style>
	.page_content{
		padding: 0px;
	}
</style>
